<template>
  <view>
    <!-- 旧密码 -->
    <view class="functionArray-item">
      <text style="margin-right: 25rpx;">旧密码</text>
      <input v-model="oldPassword" placeholder="请输入旧密码" :maxlength="32"
        style="text-align: end;width: 70%;font-size: 16px;" placeholder-style="font-size:12px;color:#bbb;" />
    </view>

    <!-- 输入新密码 -->
    <view class="functionArray-item">
      <text style="margin-right: 25rpx;">新密码</text>
      <input class="input" v-model="newPassword" placeholder="请输入8-16位密码,需同时包含数字、字母"
        style="text-align: end;width: 70%;font-size: 16px;" placeholder-style="font-size:12px;color:#bbb;"
        :maxlength="16" />
    </view>

    <!-- 再次输入新密码 -->
    <view class="functionArray-item">
      <text style="margin-right: 25rpx;">再次输入新密码</text>
      <input class="input" v-model="newPasswordCopy" placeholder="再次输入新密码"
        placeholder-style="font-size:12px;color:#bbb;" style="text-align: end;width: 60%;font-size: 16px;"
        :maxlength="16" />
    </view>

    <!-- 绑定邮箱按钮 -->
    <button class="button-bindingEmail" @click="editPassword">确认修改</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        oldPassword: '', // 旧密码
        newPassword: '', // 新密码
        newPasswordCopy: '', // 重置新密码
        token: ''
      };
    },
    async onLoad(e) {
      this.token = await uni.getStorageSync('token')

      // 查询用户基本信息
      await this.$http.user.getUserInfoByToken(this.token).then(res => {
        console.log("res: " + JSON.stringify(res));
        this.user = res.data
      }).catch(err => {
        console.log("res: " + JSON.stringify(res));
      })
    },
    methods: {
      /**
       * @deprecated 确认设置按钮
       */
      async editPassword() {
        let pwdNumber = /(?=.*[0-9]).{8,16}/;
        let pwdABC = /(?=.*[a-zA-Z]).{8,16}/;


        if (this.newPassword.trim().length < 8) {
          uni.showToast({
            title: '密码必须大于或等于8位！',
            icon: 'none',
            position: 'center'
          });
          return
        }

        if (!pwdNumber.test(this.newPassword.trim())) {
          uni.showToast({
            title: '密码必须包含数字！',
            icon: 'none',
            position: 'center'
          });
          return
        }

        if (!pwdABC.test(this.newPassword.trim())) {
          uni.showToast({
            title: '密码必须包含字母！',
            icon: 'none',
            position: 'center'
          });
          return
        }
        
        if (this.oldPassword.trim() == this.newPassword.trim()) {
          uni.showToast({
            title: '新密码不能和旧密码相同！',
            icon: 'none',
            position: 'center'
          });
          return
        }

        if (this.newPassword.trim() != this.newPasswordCopy.trim()) {
          uni.showToast({
            title: '两次密码输入不一致！',
            icon: 'none',
            position: 'center'
          });
          return
        }

        uni.showLoading({
          title: '正在提交中...'
        })

        // 根据旧密码修改用户密码
        await this.$http.user.resetPwd(this.token, this.oldPassword.trim(), this.newPassword.trim())
          .then(res => {
            console.log("res: " + JSON.stringify(res));

            if (res.code == 401) {
              uni.showToast({
                title: res.msg,
                icon: 'none',
                position: 'center'
              })
              return
            }
            if (!res.code) {
              uni.showToast({
                title: '服务器开小差了',
                icon: 'none',
                position: 'center'
              })
              return
            }

            if (res.code == 200) {
              // 接收服务器新发来的token，重新更新
              uni.setStorageSync('token', res.token)
              
              uni.showToast({
                title: '修改成功！',
                icon: 'none',
                position: 'center'
              })

              // 修改成功，延迟500ms后返回
              setTimeout(() => {
                uni.navigateBack()
              }, 500)
            }
          }).catch(err => {
            console.log("err: " + JSON.stringify(err));
          })

        uni.hideLoading()
      }
    }
  }
</script>

<style lang="scss">
  .functionArray-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
    height: 100rpx;
    padding: 0 25rpx;

    & .button {
      border: 1px solid #155bff;
      margin-left: 25rpx;
      color: #155bff;
      padding: 10rpx 25rpx;
      border-radius: 3px;
    }
  }

  .button-bindingEmail {
    background: #000;
    color: #fff;
    margin: 30rpx;
    font-size: 16px;
  }
</style>
